<template>
	<div class="container">
		<el-container>
			<el-header style="padding:0">
				<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" style="padding:0;">
					<el-menu-item>
						<span class="text-large font-600">Amadeus</span>
					</el-menu-item>
					<div class="flex-grow" />
					<el-menu-item>
						<div class="block">
							<el-avatar :src="avatarUrl" />
							{{ userName }}
						</div>
					</el-menu-item>
				</el-menu>
			</el-header>
			<el-container class="container">
				<el-aside :class="{
					'collapse': !isCollapse,
					'collapseOpen': isCollapse
				}">
					<el-menu :default-active="activeIndex" :collapse="isCollapse" router="true">
						<el-menu-item index="/">
							<el-icon>
								<Odometer />
							</el-icon>
							<template #title>数据总览</template>
						</el-menu-item>
						<el-menu-item index="/index">
							<el-icon>
								<HomeFilled />
							</el-icon>
							<template #title>主页相关</template>
						</el-menu-item>
						<el-menu-item index="/article">
							<el-icon>
								<Memo />
							</el-icon>
							<template #title>文章相关</template>
						</el-menu-item>
						<el-menu-item index="/movie">
							<el-icon>
								<VideoCameraFilled />
							</el-icon>
							<template #title>电影相关</template>
						</el-menu-item>
						<el-menu-item index="/user">
							<el-icon>
								<Avatar />
							</el-icon>
							<template #title>用户相关</template>
						</el-menu-item>
						<el-menu-item index="/comment">
							<el-icon>
								<ChatLineSquare />
							</el-icon>
							<template #title>电影评论</template>
						</el-menu-item>
						<el-menu-item index="/articleComments">
							<el-icon>
								<ChatLineSquare />
							</el-icon>
							<template #title>文章评论</template>
						</el-menu-item>
						<el-menu-item index="/aloneDashboard">
							<el-icon>
								<Odometer />
							</el-icon>
							<template #title>可视化大屏</template>
						</el-menu-item>
						<el-menu-item disabled>
							<el-icon @click="collapse">
								<el-icon>
									<Plus v-if="isCollapse" />
									<Minus v-else />
								</el-icon>
							</el-icon>
							<template #title>{{ isCollapse? '展开': "收缩" }}</template>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<!-- 子路由顯示區域 -->
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const activeIndex = ref("/"),
	userName = sessionStorage.getItem("userName"),
	avatarUrl = sessionStorage.getItem("avatarUrl"),
	isCollapse = ref(false),
	router = useRouter()

router.push("/")

function collapse() {
	isCollapse.value = !isCollapse.value
}

</script>

<style lang="scss" scoped>
.container {
	position: relative;
	width: 100vw;
	min-width: 1280px;
	// max-width: 1730px;
}

.flex-grow {
	flex-grow: 1;
}

.el-menu-item * {
	vertical-align: middle;
}

// 设置一下导航栏展开与不展开的样式
.el-aside {
	transition: all 0.5s ease;
}

.el-aside.collapse {
	width: 200px;
}

.el-aside.collapseOpen {
	width: auto;
}

// 设置一下主内容顶部内边距
.el-main {
	padding-top: 0;
}
</style>
